<template>
    <div class="gauge-card" ref="chartRef" style="width: 100%; height: 90px;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 接收 props
const props = defineProps<{
  title: string
  value: number
}>();

const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;
let timer: number;

onMounted(() => {
    if (!chartRef.value) return;
    myChart = echarts.init(chartRef.value);

    const option: echarts.EChartsOption = {
        series: [
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 1,
                splitNumber: 6,
                itemStyle: {
                    color: '#FFAB91'
                },
                progress: {
                    show: true,
                    width: 8
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 8
                    }
                },
                axisTick: {
                    distance: -25,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: '#7ad3ff'
                    }
                },
                splitLine: {
                    distance: -26,
                    length: 12,
                    lineStyle: {
                        width: 3,
                        color: '#7ad3ff'
                    }
                },
                axisLabel: {
                    show: false,
                },
                anchor: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    width: '100%',
                    lineHeight: 20,
                    borderRadius: 8,
                    offsetCenter: [0, '3%'],
                    fontSize: 12,
                    fontWeight: 'bolder',
                    color: 'inherit',
                    formatter: (value: number) => {
                        return `{valueStyle|${value} M}\n{labelStyle|${props.title}}`;
                    },
                    rich: {
                        valueStyle: {
                            fontSize: 10,
                            fontWeight: 700,
                            color: '#e3feff'
                        },
                        labelStyle: {
                            fontSize: 12,
                            color: '#e3feff',
                            borderWidth: 1,
                            borderColor: '#78d0fc',
                            borderRadius: 4,
                            padding: [4, 4, 0, 4],
                            backgroundColor: '#2c6094',
                            align: 'center'
                        }
                    }
                },
                data: [{ value: props.value }]
            },
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 1,
                itemStyle: {
                    color: '#7ad3ff'
                },
                progress: {
                    show: true,
                    width: 8
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [{ value: props.value }]
            }
        ]
    };

    myChart.setOption(option);

    window.addEventListener('resize', handleResize);
});

const handleResize = () => {
    myChart?.resize();
};

onBeforeUnmount(() => {
    timer && clearInterval(timer);
    window.removeEventListener('resize', handleResize);
    myChart?.dispose();
});
</script>
